<template>
  <div class="w-1200-container">
    <Bread />
    <!-- 公司简介 -->
    <div class="brief-card">
      <div class="icon-box">
        <el-image :src="info.picture" fit="contain">
          <el-image slot="error" :src="defaultIcon" fit="contain"> </el-image>
        </el-image>
      </div>
      <div class="content">
        <h6>{{ info.title }}</h6>
        <div class="sub">
          <div class="sub-line">地址： {{ schoolAddress(info) }}</div>
        </div>
      </div>
    </div>


    <div class="my-12">
      <div class="detail-item-box" id="baseInfo">
        <h6>基本信息</h6>
        <p class="content" v-html="info.content"></p>
      </div>
    </div>
  </div>
</template>

<script>
import { getGaoXiaoDetail, selectEnterpriseBelieveData } from "@/api/info.js";

import Bread from "@/components/Bread";
import LevelLinkCard from "@/views/components/LevelLinkCard";
export default {
  components: {
    Bread,
    LevelLinkCard,
  },
  data() {
    return {
      defaultIcon: require("@/assets/images/company/default.png"),
      info: {
        title: "",

        picture:
          "",
        province: '',
        city: '',
        region: '',
        content: ''
      },
      navlist: [
        // { name: "入榜情况", hrefname: "entryStatus" },
        // { name: "成长画像", hrefname: "growCanvas" },
        { name: "基本信息", hrefname: "baseInfo" },
        // { name: "工商信息", hrefname: "businessInfo" },
      ],

      cellStyle: {
        textAlign: "center",
        padding: ".9rem 0",
        fontWeight: "400",
      },
      headStyle: {
        textAlign: "center",
        backgroundColor: "#e4eef6",
        padding: ".9rem 0",
      },
      growData: [
        {
          levelname: "2020年度GEI中国潜在独角兽企业榜单",
          are: 52,
          time: 2021,
        },
        {
          levelname: "2020年度GEI中国潜在独角兽企业榜单",
          are: 1,
          time: 2020,
        },
      ],

      // 入榜情况
      believeData: [],
    };
  },
  computed:{
        schoolAddress(){
        return (infoItem)=>{
          const AddressNames = [ 'province', 'city', 'region' ]
          let resAddressArr = AddressNames.filter(item=> infoItem[item])
          return infoItem[resAddressArr[0]]
        }
    },
  },
  async created() {
    this.getInfo();
  },
  mounted() {
    this.getBelieveData();
  },
  methods: {
    async getInfo() {
      let id = this.$route.params.id || 0;

      if (!id) {
        this.$router.push({
          path: "/404",
        });
      }
      let res = await getGaoXiaoDetail(id);
      console.log('高校详情');
      console.log(res);
      if (res.code === 200) {
        this.info = res.data;
      }
    },
    // 获取排行榜信息
    getBelieveData() {
      selectEnterpriseBelieveData(this.$route.params.id || 0).then((res) => {
        this.believeData = res.data;
      });
    },

    jumpTo(element) {
      document.querySelector("#" + element).scrollIntoView({
        behavior: "smooth",
        block: "start",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.brief-card {
  background-color: #f1f3fb;
  @apply flex p-6;
  .icon-box {
    width: 165px;
    height: 141px;
    padding-right: 24px;
    .el-image {
      width: 141px;
      height: 141px;
    }
  }
  .content {
    @apply flex flex-col justify-around flex-1 flex-grow;
    .sub {
      @apply mt-4 leading-8;

      .sub-line {
        @apply text-t666;
        .sub-line-item {
          min-width: 10rem;
          @apply inline-block mr-20;
        }
      }
    }
  }
}

.detail-item-box {
  @apply mb-8;

  .content {
    // min-height: 200px;
    @apply mt-8;

    .content-title {
      @apply text-blue-600 font-bold mb-2;
    }
  }

  .content-ul {
    li {
      @apply mb-4 text-sm leading-6;
    }
  }
}

.nav-line-box {
  @apply relative flex justify-center h-16 border-b border-gray-200 my-4;
  .nav-line-item {
    @apply flex-1 flex-grow  flex justify-center text-center;

    .item-content,
    .item-content-active {
      @apply flex flex-col justify-center w-2/5 h-16 border-b cursor-pointer;
    }
    .item-content-active {
      @apply border-blue-500;
    }
  }

  .nav-line-item:hover {
    .item-content {
      @apply border-blue-500 text-blue-500;
    }
  }
}

.level-box {
  @apply grid grid-cols-3 mt-8;

  .level-box-item {
    @apply pr-8;
  }

  .level-box-content {
    @apply mr-4 w-80 h-16 flex justify-center align-middle items-center border border-green-300 hover:border-red-400 text-blue-500 cursor-pointer;
  }
}

.self-talbe {
  border-collapse: collapse;

  .self-tr {
    border: 1px solid #efefef;
    text-align: center;
    th,
    td {
      min-height: 4rem;
      height: 4rem;
    }
    td {
      min-width: 18rem;

      border: 1px solid #efefef;
      padding: 1rem 0.5rem;
    }
  }
  .min-td-width {
    min-width: 10rem;
  }
}
</style>
